CSS View Transitions -siirtymien hallinta: Syväsukellus pseudo-elementtien muotoiluun

Jatkuvasti kehittyvässä web-kehityksen maailmassa saumattoman, sulavan ja mukaansatempaavan käyttäjäkokemuksen tavoittelu on jatkuvaa. Vuosien ajan kehittäjät ovat pyrkineet kuromaan umpeen verkon ja natiivisovellusten välistä kuilua, erityisesti sivusiirtymien sulavuuden osalta. Perinteinen verkkonavigointi johtaa usein töksähtävään, koko sivun uudelleenlataukseen – tyhjään valkoiseen ruutuun, joka hetkellisesti rikkoo käyttäjän immersion. Yhden sivun sovellukset (SPA) ovat lieventäneet tätä, mutta räätälöityjen, merkityksellisten siirtymien luominen on pysynyt monimutkaisena ja usein hauraana tehtävänä, joka on vahvasti riippuvainen JavaScript-kirjastoista ja monimutkaisesta tilanhallinnasta.

Tähän astuu CSS View Transitions API, mullistava teknologia, joka on valmis uudistamaan tapamme käsitellä käyttöliittymän muutoksia verkossa. Tämä tehokas API tarjoaa yksinkertaisen, mutta uskomattoman joustavan mekanismin animointiin eri DOM-tilojen välillä, tehden kiillotettujen, sovellusmaisten kokemusten luomisesta helpompaa kuin koskaan – sellaisten, joita käyttäjät ovat tottuneet odottamaan. Tämän APIn voiman ytimessä on joukko uusia CSS-pseudo-elementtejä. Nämä eivät ole tyypillisiä valitsimiasi; ne ovat dynaamisia, väliaikaisia elementtejä, jotka selain luo antaakseen sinulle tarkan hallinnan siirtymän jokaisesta vaiheesta. Tämä opas vie sinut syväsukellukselle tähän pseudo-elementtipuuhun, tutkien kuinka muotoilla kutakin komponenttia upeiden, suorituskykyisten ja saavutettavien animaatioiden rakentamiseksi globaalille yleisölle.

Näkymäsiirtymän anatomia

Ennen kuin voimme muotoilla siirtymää, meidän on ymmärrettävä, mitä konepellin alla tapahtuu, kun se käynnistetään. Kun käynnistät näkymäsiirtymän (esimerkiksi kutsumalla document.startViewTransition()), selain suorittaa sarjan vaiheita:

• Vanhan tilan kaappaus: Selain ottaa "kuvakaappauksen" sivun nykyisestä tilasta.
• DOM:n päivitys: Koodisi tekee sitten muutokset DOM:iin (esim. navigoi uuteen näkymään, lisää tai poistaa elementtejä).
• Uuden tilan kaappaus: Kun DOM-päivitys on valmis, selain ottaa kuvakaappauksen uudesta tilasta.
• Pseudo-elementtipuun rakentaminen: Selain rakentaa sitten väliaikaisen pseudo-elementtipuun sivun peittotasolle. Tämä puu sisältää kaapatut kuvat vanhasta ja uudesta tilasta.
• Animointi: CSS-animaatioita sovelletaan näihin pseudo-elementteihin, mikä luo sulavan siirtymän vanhasta tilasta uuteen. Oletusarvo on yksinkertainen ristihäivytys.
• Siivous: Kun animaatiot ovat valmiit, pseudo-elementtipuu poistetaan, ja käyttäjä voi olla vuorovaikutuksessa uuden, elävän DOM:n kanssa.

Avain räätälöintiin on tämä väliaikainen pseudo-elementtipuu. Ajattele sitä kuin joukkona tasoja suunnittelutyökalussa, jotka on väliaikaisesti asetettu sivusi päälle. Sinulla on täysi CSS-hallinta näiden tasojen yli. Tässä on rakenne, jonka kanssa tulet työskentelemään:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Käydään läpi, mitä kukin näistä pseudo-elementeistä edustaa.

Pseudo-elementtien esittely

::view-transition: Tämä on koko rakenteen juuri. Se on yksittäinen elementti, joka täyttää näkymän ja on kaiken muun sivun sisällön päällä. Se toimii säilönä kaikille siirtyville ryhmille ja on erinomainen paikka asettaa yleisiä siirtymäominaisuuksia, kuten kesto tai ajoitusfunktio.

::view-transition-group(*): Jokaiselle erilliselle siirtyvälle elementille (tunnistetaan view-transition-name-CSS-ominaisuudella) luodaan ryhmä. Tämä pseudo-elementti on vastuussa sisältönsä sijainnin ja koon animoinnista. Jos sinulla on kortti, joka siirtyy ruudun toiselta puolelta toiselle, se on ::view-transition-group, joka todellisuudessa liikkuu.

::view-transition-image-pair(*): Ryhmän sisällä sijaitseva elementti toimii säilönä ja leikkausmaskina vanhalle ja uudelle näkymälle. Sen ensisijainen tehtävä on ylläpitää efektejä, kuten border-radius tai transform, animaation aikana ja hoitaa oletusarvoinen ristihäivytysanimaatio.

::view-transition-old(*): Tämä edustaa "kuvakaappausta" tai renderöityä näkymää elementistä sen vanhassa tilassa (ennen DOM-muutosta). Oletuksena se animoituu arvosta opacity: 1 arvoon opacity: 0.

::view-transition-new(*): Tämä edustaa "kuvakaappausta" tai renderöityä näkymää elementistä sen uudessa tilassa (DOM-muutoksen jälkeen). Oletuksena se animoituu arvosta opacity: 0 arvoon opacity: 1.

Juurielementti: ::view-transition-pseudo-elementin muotoilu

::view-transition-pseudo-elementti on kangas, jolle koko animaatiosi maalataan. Ylätason säilönä se on ihanteellinen paikka määrittää ominaisuuksia, joiden tulisi soveltua globaalisti siirtymään. Oletuksena selain tarjoaa joukon animaatioita, mutta voit helposti korvata ne.

Esimerkiksi oletussiirtymä on ristihäivytys, joka kestää 250 millisekuntia. Jos haluat muuttaa tätä jokaiselle siirtymälle sivustollasi, voit kohdistaa juuri-pseudo-elementtiin:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Tämä yksinkertainen sääntö saa nyt kaikki oletussivun häivytykset kestämään kaksi kertaa kauemmin ja käyttämään 'ease-in-out'-käyrää, mikä antaa niille hieman erilaisen tunteen. Vaikka voit soveltaa täällä monimutkaisia animaatioita, sitä on yleensä parasta käyttää yleisen ajoituksen ja pehmennyksen määrittämiseen, jättäen yksityiskohtaisemman koreografian tarkemmille pseudo-elementeille.

Ryhmittely ja nimeäminen: `view-transition-name`-ominaisuuden voima

Ilman mitään lisätyötä View Transition API tarjoaa ristihäivytyksen koko sivulle. Tämän hoitaa yksi ainoa pseudo-elementtiryhmä juurelle. APIn todellinen voima avautuu, kun haluat siirtää tiettyjä, yksittäisiä elementtejä tilojen välillä. Esimerkiksi tuotteen pikkukuvan saumaton kasvattaminen ja siirtäminen listasivulta päätuotteen kuvan paikalle tuotesivulla.

Kertoaksesi selaimelle, että kaksi elementtiä eri DOM-tiloissa ovat käsitteellisesti samoja, käytät view-transition-name-CSS-ominaisuutta. Tämä ominaisuus on sovellettava sekä alku- että loppuelementtiin.

/* Listasivun CSS:ssä */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Tuotesivun CSS:ssä */

.main-product-image {

  view-transition-name: product-image;

}

Antamalla molemmille elementeille saman yksilöllisen nimen ('product-image' tässä tapauksessa), ohjeistat selainta: "Sen sijaan, että vain häivyttäisit vanhan sivun pois ja uuden sisään, luo erityinen siirtymä tälle nimenomaiselle elementille." Selain luo nyt omistetun ::view-transition-group(product-image)-ryhmän hoitamaan sen animaation erillään juuren häivytyksestä. Tämä on peruskäsite, joka mahdollistaa suositun "morphing"- tai "shared element" -siirtymäefektin.

Tärkeä huomio: Siirtymän aikana view-transition-name-arvon on oltava kullakin hetkellä yksilöllinen. Sinulla ei voi olla kahta näkyvää elementtiä samalla nimellä samaan aikaan.

Syvällinen muotoilu: Ydin-pseudo-elementit

Kun elementtimme on nimetty, voimme nyt syventyä niiden erityisten pseudo-elementtien muotoiluun, jotka selain niille luo. Tässä voit luoda todella räätälöityjä ja ilmeikkäitä animaatioita.

`::view-transition-group(name)`: Liikuttaja

Ryhmän ainoa tehtävä on siirtyä vanhan elementin koosta ja sijainnista uuden elementin kokoon ja sijaintiin. Se ei sisällä varsinaisen sisällön ulkonäköä, ainoastaan sen rajaavan laatikon. Ajattele sitä liikkuvana kehyksenä.

Oletuksena selain animoi sen transform- ja width/height-ominaisuuksia. Voit korvata tämän luodaksesi erilaisia efektejä. Voisit esimerkiksi lisätä sen liikkeeseen kaaren animoimalla sitä pitkin kaarevaa polkua, tai saada sen skaalautumaan ylös ja alas matkansa aikana.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

Tässä esimerkissä sovellamme tiettyä pehmennysfunktiota vain tuotekuvan liikkeeseen, mikä saa sen tuntumaan dynaamisemmalta ja fyysisemmältä vaikuttamatta muun sivun oletushäivytykseen.

`::view-transition-image-pair(name)`: Leikkaaja ja häivyttäjä

Liikkuvan ryhmän sisällä image-pair pitää sisällään vanhan ja uuden näkymän. Se toimii leikkausmaskina, joten jos elementilläsi on border-radius, image-pair varmistaa, että sisältö pysyy leikattuna sillä säteellä koko koko- ja sijaintianimaation ajan. Sen toinen päätehtävä on ohjata oletusarvoinen ristihäivytys vanhan ja uuden sisällön välillä.

Voit haluta muotoilla tätä elementtiä varmistaaksesi visuaalisen johdonmukaisuuden tai luodaksesi edistyneempiä efektejä. Tärkeä huomioitava ominaisuus on isolation: isolate. Tämä on ratkaisevaa, jos aiot käyttää edistyneitä mix-blend-mode-efektejä lapsielementeissä (vanha ja uusi), koska se luo uuden pinoamiskontekstin ja estää sekoitusta vaikuttamasta siirtymäryhmän ulkopuolisiin elementteihin.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` ja `::view-transition-new(name)`: Esityksen tähdet

Nämä ovat pseudo-elementtejä, jotka edustavat elementtisi visuaalista ilmettä ennen ja jälkeen DOM-muutoksen. Täällä suurin osa räätälöidystä animaatiotyöstäsi tapahtuu. Oletuksena selain ajaa niille yksinkertaisen ristihäivytysanimaation käyttämällä opacity- ja mix-blend-mode-ominaisuuksia. Luodaksesi mukautetun animaation, sinun on ensin kytkettävä oletusanimaatio pois päältä.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Kun oletusanimaatio on poistettu käytöstä, olet vapaa soveltamaan omaasi. Tutkitaan muutamia yleisiä malleja.

Mukautettu animaatio: Liukuminen

Ristihäivytyksen sijaan, tehdään säilön sisällöstä liukuva. Esimerkiksi, kun navigoidaan artikkelien välillä, haluamme uuden artikkelin tekstin liukuvan sisään oikealta, kun vanha teksti liukuu ulos vasemmalle.

Määritä ensin avainkehykset:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Nyt sovella näitä animaatioita vanhoihin ja uusiin pseudo-elementteihin nimetylle elementille 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Mukautettu animaatio: 3D-kääntö

Dramaattisemman efektin saamiseksi voit luoda 3D-kortin kääntöefektin. Tämä vaatii transform-ominaisuuden animointia rotateY-arvolla ja myös backface-visibility-ominaisuuden hallintaa.

/* Ryhmä tarvitsee 3D-kontekstin */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Myös image-pairin tulee säilyttää 3D-konteksti */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Vanha näkymä kääntyy 0:sta -180 asteeseen */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Uusi näkymä kääntyy 180:sta 0 asteeseen */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Käytännön esimerkkejä ja edistyneitä tekniikoita

Teoria on hyödyllistä, mutta käytännön sovelluksissa opimme todella. Käydään läpi joitakin yleisiä skenaarioita ja kuinka ratkaista ne view transition -pseudo-elementeillä.

Esimerkki: "Morphing"-kortin pikkukuva

Tämä on klassinen jaettu elementti -siirtymä. Kuvittele galleria käyttäjäprofiileja. Jokainen profiili on kortti, jossa on avatari. Kun napsautat korttia, siirryt tuotesivulle, jossa sama avatari näkyy näkyvästi yläosassa.

Vaihe 1: Anna nimet

Galleriasivullasi avatar-kuva saa nimen. Nimen tulisi olla yksilöllinen jokaiselle kortille, esimerkiksi käyttäjän tunnisteen perusteella.

/* gallery-item.css-tiedostossa */

.card-avatar { view-transition-name: avatar-user-123; }

Profiilin tuotesivulla suuri otsikkoavatari saa täsmälleen saman nimen.

/* profile-page.css-tiedostossa */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Vaihe 2: Mukauta animaatiota

Oletuksena selain siirtää ja skaalaa avataria, mutta se myös ristihäivyttää sisällön. Jos kuva on identtinen, tämä häivytys on tarpeeton ja voi aiheuttaa pienen välähdyksen. Voimme poistaa sen käytöstä.

/* Tähti (*) tässä on jokerimerkki mille tahansa nimetylle ryhmälle */

::view-transition-image-pair(*) {

  /* Poista oletushäivytys käytöstä */

  animation-duration: 0s;

}

Hetkinen, jos poistamme häivytyksen käytöstä, miten sisältö vaihtuu? Jaetuille elementeille, joissa vanha ja uusi näkymä ovat identtisiä, selain on riittävän älykäs käyttämään vain yhtä näkymää koko siirtymän ajan. `image-pair` pitää olennaisesti sisällään vain yhden kuvan, joten häivytyksen poistaminen käytöstä yksinkertaisesti paljastaa tämän optimoinnin. Elementeille, joissa sisältö todella muuttuu, tarvitsisit mukautetun animaation oletushäivytyksen tilalle.

Kuvasuhteen muutosten käsittely

Yleinen haaste syntyy, kun siirtyvä elementti muuttaa kuvasuhdettaan. Esimerkiksi 16:9-laajakuvapikkukuva listasivulla voi siirtyä 1:1-neliön muotoiseksi avatariksi tuotesivulla. Selaimen oletuskäyttäytyminen on animoida leveys ja korkeus itsenäisesti, mikä saa kuvan näyttämään litistyneeltä tai venytetyltä siirtymän aikana.

Ratkaisu on elegantti. Annamme ::view-transition-group-elementin hoitaa koon ja sijainnin muutoksen, mutta korvaamme sen sisällä olevien vanhojen ja uusien kuvien muotoilun.

Tavoitteena on saada vanhat ja uudet "kuvakaappaukset" täyttämään säilönsä vääristymättä. Voimme tehdä tämän asettamalla niiden leveyden ja korkeuden 100%:iin ja antamalla selaimen oletusarvoisen object-fit-ominaisuuden (joka periytyy alkuperäisestä elementistä) hoitaa skaalauksen oikein.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Estä vääristyminen täyttämällä säiliö */

  width: 100%;

  height: 100%;

  

  /* Korvaa oletusristihäivytys nähdäksesi vaikutuksen selvästi */

  animation: none;

}

Tällä CSS:llä `image-pair` animoi sujuvasti kuvasuhdettaan, ja sisällä olevat kuvat rajataan tai sovitetaan oikein (riippuen niiden `object-fit`-arvosta), aivan kuten ne tekisivät normaalissa säiliössä. Voit sitten lisätä omia mukautettuja animaatioitasi, kuten ristihäivytyksen, tämän korjatun geometrian päälle.

Virheenjäljitys ja selaintuki

Elementtien muotoilu, jotka ovat olemassa vain sekunnin murto-osan, voi olla hankalaa. Onneksi modernit selaimet tarjoavat erinomaiset kehitystyökalut tähän. Chromen tai Edgen DevToolsissa voit mennä "Animations"-paneeliin, ja kun käynnistät näkymäsiirtymän, voit pysäyttää sen. Kun animaatio on pysäytetty, voit käyttää "Elements"-paneelia tarkastellaksesi koko `::view-transition`-pseudo-elementtipuuta aivan kuten mitä tahansa muuta DOM:n osaa. Näet sovelletut tyylit ja voit jopa muokata niitä reaaliaikaisesti viimeistelläksesi animaatiosi.

Vuoden 2023 lopulla View Transitions API on tuettu Chromium-pohjaisissa selaimissa (Chrome, Edge, Opera). Toteutukset ovat käynnissä Firefoxille ja Safarille. Tämä tekee siitä täydellisen ehdokkaan progressiiviseen parantamiseen. Käyttäjät tuetuilla selaimilla saavat ilahduttavan, parannetun kokemuksen, kun taas käyttäjät muilla selaimilla saavat standardin, välittömän navigoinnin. Voit tarkistaa tuen CSS:llä:

@supports (view-transition: none) {

  /* Kaikki view-transition-tyylit tulevat tänne */

  ::view-transition-old(my-element) { ... }

}

Parhaat käytännöt globaalille yleisölle

Animaatioita toteutettaessa on elintärkeää ottaa huomioon käyttäjien ja laitteiden moninaisuus maailmanlaajuisesti.

Suorituskyky: Animaatioiden tulee olla nopeita ja sulavia. Pysy animoimassa CSS-ominaisuuksia, jotka ovat selaimelle edullisia käsitellä, pääasiassa transform ja opacity. Ominaisuuksien kuten width, height tai margin animointi voi laukaista asettelun uudelleenlaskennan jokaisella ruudulla, mikä johtaa pätkimiseen ja huonoon kokemukseen, erityisesti heikompitehoisilla laitteilla.

Saavutettavuus: Jotkut käyttäjät kokevat liikesairautta tai epämukavuutta animaatioista. Kaikki suuret käyttöjärjestelmät tarjoavat käyttäjäasetuksen liikkeen vähentämiseksi. Meidän on kunnioitettava tätä. prefers-reduced-motion-mediakysely antaa sinun poistaa käytöstä tai yksinkertaistaa animaatioitasi näille käyttäjille.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Ohita kaikki mukautetut animaatiot ja käytä nopeaa, yksinkertaista häivytystä */

    animation: none !important;

  }

}

Käyttäjäkokemus (UX): Hyvät siirtymät ovat tarkoituksenmukaisia. Niiden tulisi ohjata käyttäjän huomiota ja antaa kontekstia käyttöliittymässä tapahtuvasta muutoksesta. Liian hidas animaatio voi saada sovelluksen tuntumaan hitaalta, kun taas liian pramea voi olla häiritsevä. Tavoittele siirtymien kestoja 200 ms ja 500 ms välillä. Tavoitteena on, että animaatio tuntuu enemmän kuin se nähdään.

Johtopäätös: Tulevaisuus on sulava

CSS View Transitions API, ja erityisesti sen tehokas pseudo-elementtipuu, edustaa valtavaa harppausta eteenpäin verkon käyttöliittymille. Se tarjoaa kehittäjille natiivin, suorituskykyisen ja erittäin muokattavan työkalupakin sellaisten sulavien, tilallisten siirtymien luomiseen, jotka olivat aiemmin yksinomaan natiivisovellusten aluetta. Ymmärtämällä ::view-transition, ::view-transition-group ja old/new-kuvaparien roolit, voit siirtyä yksinkertaisia häivytyksiä pidemmälle ja koreografioida monimutkaisia, merkityksellisiä animaatioita, jotka parantavat käytettävyyttä ja ilahduttavat käyttäjiä.

Selaintuen laajentuessa tästä APIsta tulee olennainen osa modernin front-end-kehittäjän työkalupakkia. Omaksumalla sen kyvykkyydet ja noudattamalla parhaita käytäntöjä suorituskyvyn ja saavutettavuuden osalta, voimme rakentaa verkon, joka ei ole vain toimivampi, vaan myös kauniimpi ja intuitiivisempi kaikille, kaikkialla.